<template>
    <div class='dialog'>
        <div class='newAdd dialog-con supplyContext'>
          <split-vertical title="更新供应商信息"></split-vertical>
            <div class="info qcfd">
                <div class="supplyinfo f-fl">
                    <div class='companyname'>
                        <label><span>*</span>供应商名称:</label> <el-input type="text" placeholder="必输项" v-model="addinfo.supplyName"></el-input><br>
                        <label><span>*</span>供应商编码:</label> <el-input type="text" placeholder="必输项" v-model="addinfo.supplyCode"></el-input><br>
                        <label><span>*</span>联系人姓名:</label> <el-input type="text" placeholder="必输项" v-model="addinfo.supplyContact"></el-input><br>
                        <label><span>*</span>联系人职位:</label> <el-input type="text" placeholder="必输项" v-model="addinfo.supplyContactPosition"></el-input><br>
                        <label><span>*</span>开户行账号:</label> <el-input type="text" placeholder="必输项" v-model="addinfo.supplyAccount" disabled></el-input><br>
                        <label><span>*</span>开户行名称:</label> <el-input type="text" placeholder="必输项" v-model="addinfo.supplyAccountName"  disabled></el-input><br>
                    </div>
                </div>
                <div class="authbrand f-fr">
                    <label><span>*</span>公司地址:</label> <el-input type="text" placeholder="必输项" v-model="addinfo.supplyAddress"></el-input><br>
                    <label><span>*</span>联系人电话:</label> <el-input type="text" placeholder="必输项" v-model="addinfo.supplyMobile" ></el-input><br>
                    <div class="auth" >
                        <label ><span>*</span>授权品牌</label>
                        <el-select  v-model="arr" placeholder="请选择" multiple  style="min-height:50px;">
                            <el-option
                            v-for="item in brandList"
                            :key="item.id"
                            :label="item.bname"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="auth">
                        <label ><span>*</span>合作方式</label>
                        <el-select v-model="addinfo.cooperationType" placeholder="请选择" disabled >
                            <el-option
                            v-for="item in cooperationMethods"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="contact">
                        <label><span>*</span>公司三证</label>
                        <el-radio-group v-model="addinfo.supplyCertificate">
                            <el-radio label="有">有</el-radio>
                            <el-radio label="无">无</el-radio>
                        </el-radio-group>
                    </div>
                </div>
            </div>
            <div class="supplyConfirm">
                <el-button @click="confirm(addinfo.id)" type="primary" size="medium">确定</el-button>
                <el-button @click="cancel"  size="medium">取消</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import api from 'js/service'
import SplitVertical from "components/common/SplitVertical"
export default {
    inject:['reload'],
    components:{
      SplitVertical
    },
    data(){
        return{
            brandList:[],
            //合作方式假数据
            cooperationMethods:[{
                value: '1',
                label: '直采直销'
            },{
                 value: '2',
                label: '一件代发'
            }
            ],
            arr:[],
            brands:[],
        }
    },
    props:{
        addinfo:{
            type:Object,
            default:{}
        }
    },

    created(){
        this.selectBrand()
    },
    watch:{
        addinfo(newVal,oldVal){
           this.brands=newVal.brands
            for(var i in this.brands){
                this.id=this.brands[i].id
                this.arr.push(this.id)
            }
        }
    },
    methods:{
        confirm(){
            if(this.arr.lenth==0){
                return this.$message.warning("请至少选择一个授权品牌")
            }
            let parmas={
                supplyName:this.addinfo.supplyName ,
                supplyCode:this.addinfo.supplyCode,
                supplyAddress:this.addinfo.supplyAddress,
                supplyMobile:this.addinfo.supplyMobile,
                supplyContact:this.addinfo.supplyContact,
                supplyAccount:this.addinfo.supplyAccount,
                supplyAccountName:this.addinfo.supplyAccountName,
                accreditLevel:this.addinfo.accreditLevel,
                accreditStartTime:this.addinfo.accreditStartTime,
                accreditEndTime:this.addinfo.accreditEndTime,
                companyName:this.addinfo.companyName,
                cooperationType:this.addinfo.cooperationType,
                supplyCertificate:this.addinfo.supplyCertificate,
                brands:this.arr,
                supplyContactPosition:this.addinfo.supplyContactPosition,
                userId:1,
                id:this.addinfo.id,
            }
            let success=data=>{
                if(data.code=='OK'){
                    this.$message.success('保存成功')
                    this.reload()
                    this.$emit('closeDialog')
                }else{
                    this.$message.error(data.msg)
                }
            }
            api.supplyUpdate(parmas,success)
       },
       //品牌下拉
       selectBrand(){
            let success=data=>{
                if(data.code=='OK'){
                    this.brandList=data.data
                }else{
                    this.$message.error(data.msg)
                }
            }
            api.getBrandDetail({},success)
        },
        cancel(){
            this.$emit('closeDialog')
        },
    }
}
</script>

<style lang="scss" scoped>
.supplyContext{
    width:700px;
    min-height:480px;
    .companynews{
        h2{
            height:60px;
            line-height: 60px;
            text-indent: 20px;
            font-size: 20px;
            width:100%;
        }
    }
    .info{
        margin-left:3%;
        height:auto;
        .supplyinfo{
            width:330px;
            .companyname{
                label{
                    width: 94px;
                    display: inline-block;
                    color:#606266;
                    font-size:15px;
                }
                .el-input{
                    height:38px;
                    margin:10px 0;
                    width:220px;
                    font-size:14px;
                    color:#606266;
                }
                p{
                    margin-left:100px;
                }
                span{
                    color:red;
                }
            }
        }
    .authbrand{
        margin-right:10px;
            label{
                width: 95px;
                display: inline-block;
                color:#606266;
                font-size:15px;
            }
           .el-input{
                height:38px;
                width:218px;
                font-size: 14px;
                margin:10px 0;
                color:#606266;
           }
           p{
               color:red;
               font-size:12px;
               margin-left:30%;
           }
           span{
                color:red;
            }
        .auth{
            margin-bottom:30px;
            // height:60px;
            // line-height: 60px;
        }
        .block{
            margin-top:20px;
        }
        .contact{
            margin-top:27px;
            label{
                width: 100px;
                display: inline-block;
            }
        }
    }

    .save{
        margin-bottom:20px;
        label{
            margin-right: 30px
        }
    }
}
    .supplyConfirm{
        margin-left:70%;
        margin-top:0px;
    }
}
</style>





